<template>
    <div>
        <van-tabs v-model="active" @click="fun1">
  <van-tab v-for="item in biaoqian" :title="item.name" :key="item.id" :name="item.id">
    
    <div id="leixing">
        <div id="leixingwz1">{{ item.name }}</div>
        <div id="leixingwz2">{{ item.front_name }}</div>

    </div>
    <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="item in shopList" :key="item.id">
          <van-image :src="item.list_pic_url" @click="fun2(item.id)"/>
          <div id="spmz">{{item.name}}</div>
          <div id="spjg">￥ {{item.retail_price | jiage()}} 元</div>
        </van-grid-item>
       
      </van-grid>
  </van-tab>
</van-tabs>

    </div>
</template>

<script>

import { Geticontiaozhuan,Getshaplist } from '../request/app.js';
export default {
    data() {
        return {
            biaoqian:[],
            active:Number(this.$route.params.id),
            shopList:[],
            // tioaguolaiid:[]
        };
    },
    filters:{
        jiage:function(value){
            let val=''
      if(!isNaN(value) ){
        if(value %1==0){//整数
          val=value+".00"
        }
     
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }
      return val
        }
    },  
    created(){
        let {id}=this.$route.params
        // let ids = Number(id)
      
        Geticontiaozhuan(id).then(res=>{
            // console.log(res);
            // console.log(res.data.brotherCategory);
            this.biaoqian = res.data.brotherCategory
            
      
        })
      
        // console.log(this.active);
        // console.log(ids);
        Getshaplist(id).then(res=>{
            // console.log(res);
            this.shopList = res.data.goodsList
           

        })
    },
    mounted() {
        
    },

    methods: {
        fun1(name){
            console.log(name);
            
            // let a = `Number(this.$route.params.`+name+`)`
           
            // this.active = a
            // console.log(this.active);
          this.$router.replace('/icontiaozhuan/'+name)
          Getshaplist(name).then(res=>{
            // console.log(res);
            this.shopList = res.data.goodsList
           

        })
        },
        fun2(id){
            // console.log(id);
          this.$router.replace('/tubiaoxiangxi/'+id)

        }
    },

};
</script>

<style  scoped>
    #leixing{
        width: 100%;
        height: 100px;
        line-height: 50px;
        text-align: center;
    }
    #leixingwz1{
        font-size: 17px;
     
    }
    #leixingwz2{
        font-size: 10px;
    }
    #spmz{
        width: 140px;
        height: 23px;
        font-size: 15px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
    }
    #spjg{
        font-size: 5px;
        color:#8d0000;
    }
</style>